<template>
    <!-- mine/pages/changePhone/changePhone.wxml -->
    <view>
        <view class="now-phone">当前手机号：{{ mobile }}</view>
     <!--   <van-cell-group>
            <van-field class="phone" v-model="phone" placeholder="请输入手机号" :border="false" :maxlength="11" />
            <van-field class="code" v-model="code" center placeholder="请输入验证码" :border="false" use-button-slot :maxlength="6">
                <van-button slot="button" size="small" type="primary" @tap.native="getCode">
                    {{ codeTips }}
                </van-button>
            </van-field>
        </van-cell-group>

        <van-button :class="'submit ' + (phone.length === 11 && code.length === 6 ? 'hover' : '')" type="primary" @tap.native="submit">提交</van-button> -->
    </view>
</template>

<script>
// mine/pages/changePhone/changePhone.ts
'use strict';
// import vanField from '@vant/weapp/field/index';
// import vanButton from '@vant/weapp/button/index';

var Interval;
export default {
    components: {
        // vanField,
        // vanButton
    },
    data() {
        return {
            mobile: '',
            phone: '',
            code: '',
            codeTips: '获取验证码',
            second: 60,
            sendCode: false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function () {
        var tel = uni.getStorageSync('tel');
        var mobile = tel.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
        this.mobile=mobile
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getCode: function () {
            var that = this;

            if (that.sendCode === false) {
                var phone = that.phone;
                var reg = /^1\d{10}$/;

                if (reg.test(phone)) {
                    uni.showToast({
                        title: '短信验证码已发出',
                        icon: 'success',
                        duration: 2000
                    });
                    var second_1 = that.second;
                    var codeTips_1 = '获取验证码';
                    var sendCode_1 = true;
                    Interval = setInterval(function () {
                        var t = Number(second_1 - 1);

                        if (t == 0) {
                            clearInterval(Interval);
                            codeTips_1 = '重新获取';
                            sendCode_1 = false;
                        } else {
                            second_1 = t;
                            codeTips_1 = '已发出' + t + 's';
                        }

                        that.codeTips=codeTips_1,
                            that.sendCode=sendCode_1
                    }, 1000);
                } else {
                    uni.showToast({
                        title: '请输入正确手机号',
                        icon: 'none',
                        duration: 2000
                    });
                }
            }
        },

        submit: function () {
            if (this.phone.length === 11 && this.code.length === 6) {
                clearInterval(Interval);
                this.codeTips='获取验证码',
                    this.sendCode= false
            }
        }
    }
};
</script>
<style>
/* mine/pages/changePhone/changePhone.wxss */
.now-phone {
    margin: 104rpx 58rpx 80rpx 58rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #222222;
}
.phone {
    background-color: #f5f6fa;
}
.phone .van-cell {
    padding: 0 56rpx;
}
.phone .van-field__body {
    font-size: 30rpx;
    height: 100rpx;
    border-radius: 16rpx;
    background-color: #f5f6fa;
    padding: 0 25rpx;
    box-sizing: border-box;
}
.code {
    background-color: #f5f6fa;
}
.code .van-cell {
    padding: 0 56rpx;
}
.code .van-field__body {
    margin-top: 24rpx;
    font-size: 30rpx;
}
.code .van-field__body .van-field__control {
    height: 100rpx;
    background-color: #f5f6fa;
    border-radius: 16rpx;
    padding-left: 25rpx;
}
.code .van-button--primary {
    width: 220rpx;
    height: 100rpx;
    font-size: 30rpx;
    background: linear-gradient(105deg, #268ae8, var(--textColor));
    box-shadow: 0px 3px 6px 0px rgba(0, 110, 212, 0.3);
    border-radius: 16rpx;
}
.submit {
    position: fixed;
    left: 56rpx;
    bottom: 150rpx;
}
.submit .van-button--primary {
    width: 638rpx;
    height: 88rpx;
    background: #c0c4cc;
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #ffffff;
    border: 0;
}
.submit.hover .van-button--primary {
    background: linear-gradient(105deg, #268ae8, var(--textColor));
}
</style>
